<template>
  <div class="box">
    <el-tabs v-model="activeName">
      <el-tab-pane label="汇总" name="first">
        <el-row>
          <el-col :span="24">
            <div class="header">
              <el-form
                ref="form"
                :model="form"
                label-width="100px"
                class="flex-start"
              >
                <el-form-item label="汇总维度">
                  <el-select
                    v-model="form.collectDimensionality"
                    placeholder="请选择汇总维度"
                    style="width: 286px"
                    @change="handleDimensionalityChange"
                  >
                    <el-option label="月汇总" value="2" />
                    <el-option label="日汇总" value="1" />
                  </el-select>
                </el-form-item>
                <el-form-item label="所属网点">
                  <el-select
                    v-model="form.networkNameId"
                    placeholder="请选择所属网点"
                    style="width: 286px"
                  >
                    <el-option
                      v-for="item in networkList"
                      :key="item.id"
                      :label="item.networkName"
                      :value="item.networkName"
                    />
                  </el-select>
                </el-form-item>

                <el-form-item label="">
                  <div class="flex">
                    <el-radio v-model="form.timeType" :label="1"
                      >结算时间</el-radio
                    >
                    <el-radio v-model="form.timeType" :label="2"
                      >记账时间</el-radio
                    >

                    <el-date-picker
                      v-show="form.collectDimensionality == '2'"
                      v-model="form.month"
                      value-format="yyyy-MM"
                      type="month"
                      placeholder="选择月"
                      style="width: 300px"
                    />

                    <el-date-picker
                      v-show="form.collectDimensionality == '1'"
                      v-model="form.Time"
                      value-format="yyyy-MM-dd"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      style="width: 300px"
                      @change="hzdateChange"
                    />
                  </div>
                </el-form-item>
                <el-form-item>
                  <el-button class="cx" @click="hzsearch">查询</el-button>
                  <elbutton :obj="form" @dj="hzClear" />
                </el-form-item>
                <el-form-item label="结算类型">
                  <el-select
                    v-model="form.settleType"
                    placeholder="请选择结算类型"
                    style="width: 286px"
                  >
                    <el-option
                      v-for="(item, index) in jstype"
                      :key="index"
                      :label="item.label"
                      :value="item.label"
                    />
                  </el-select>
                </el-form-item>

                <el-form-item label="结算对象">
                  <el-input
                    v-model="form.settleObject"
                    placeholder="请选择结算对象"
                    style="width: 286px"
                  />
                </el-form-item>
                <el-form-item label="收付类型">
                  <el-select
                    v-model="form.nwReceiptPayType"
                    placeholder="请选择收付类型"
                    style="width: 286px"
                  >
                    <el-option label="应收下级" value="应收下级" />
                    <el-option label="应付下级" value="应付下级" />
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col :span="6">
            <div>当前页共{{ tableData.length }}项</div>
          </el-col>
          <el-col :span="4">
            <div>
              <el-button type="primary">新增</el-button>
              <el-button type="primary">删除</el-button>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div>
              <elltable
                ref="multipleTable"
                :loading="hzloading"
                :th="hzth"
                :data="tableData"
              />
            </div>
          </el-col>
          <div>
            <pagination
              :current-page="form.pageDate.pageNum"
              :page-size="form.pageDate.pageSize"
              :total="hztotal"
              @size-change="hzhandleSizeChange"
              @current-change="hzhandleCurrentChange"
            />
          </div>
        </el-row>
      </el-tab-pane>

      <el-tab-pane label="明细" name="second">
        <el-row>
          <el-col :span="24">
            <div class="header">
              <el-form
                ref="mxForm"
                :model="mxForm"
                label-width="100px"
                class="flex-start"
              >
                <el-form-item label="运单号">
                  <el-input
                    v-model="transportCodesString"
                    placeholder="请输入运单号,多个订单号逗号隔开"
                    style="width: 286px"
                  />
                </el-form-item>
                <el-form-item label="所属网点">
                  <el-select
                    v-model="mxForm.networkNameId"
                    placeholder="请选择所属网点"
                    style="width: 286px"
                  >
                    <el-option
                      v-for="item in networkList"
                      :key="item.id"
                      :label="item.networkName"
                      :value="item.networkName"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="时间范围">
                  <div class="flex">
                    <el-radio v-model="mxForm.timeType" :label="1"
                      >出账时间</el-radio
                    >
                    <el-radio v-model="mxForm.timeType" :label="2"
                      >收款时间</el-radio
                    >
                    <el-date-picker
                      v-model="mxForm.mxTime"
                      value-format="yyyy-MM-dd"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      style="width: 451px"
                      @change="dateChange"
                    />
                  </div>
                </el-form-item>
                <el-form-item>
                  <el-button class="cx" @click="search">查询</el-button>
                  <elbutton :obj="mxForm" @dj="clear" />
                </el-form-item>
                <el-form-item label="奖罚类型">
                  <el-select
                    v-model="mxForm.rewardType"
                    placeholder="请选择奖罚类型"
                    style="width: 286px"
                  >
                    <el-option
                      v-for="(item, index) in jftype"
                      :key="index"
                      :label="item.label"
                      :value="item.label"
                    />
                  </el-select>
                </el-form-item>

                <el-form-item label="总部结算科目">
                  <el-cascader
                    v-model="mxForm.HqSettleSubjectList"
                    :options="HqSettleSubjectList"
                    :props="props"
                    :show-all-levels="false"
                    style="width: 286px"
                    @change="handleChange"
                  />
                </el-form-item>
                <el-form-item label="结算类型">
                  <el-select
                    v-model="mxForm.pullUniformObject"
                    placeholder="请选择结算类型"
                    style="width: 286px"
                  >
                    <el-option
                      v-for="(item, index) in jstype"
                      :key="index"
                      :label="item.label"
                      :value="item.label"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="结算对象">
                  <el-input
                    v-model="mxForm.settleObject"
                    placeholder="最多输入1000条"
                    style="width: 286px"
                  />
                </el-form-item>
                <el-form-item label="收付类型">
                  <el-select
                    v-model="mxForm.hqReceiptPayType"
                    placeholder="请选择收付类型"
                    style="width: 286px"
                  >
                    <el-option label="应收下级" value="应收下级" />
                    <el-option label="应付下级" value="应付下级" />
                  </el-select>
                </el-form-item>
                <el-form-item label="是否有效">
                  <el-select
                    v-model="mxForm.effectiveStatus"
                    placeholder="请选择是否有效"
                    style="width: 286px"
                  >
                    <el-option label="无效" value="无效" />
                    <el-option label="有效" value="有效" />
                  </el-select>
                </el-form-item>
                <el-form-item label="是否核实">
                  <el-select
                    v-model="mxForm.isVerify"
                    placeholder="请选择是否核实"
                    style="width: 286px"
                  >
                    <el-option label="已核实" value="已核实" />
                    <el-option label="未核实" value="未核实" />
                  </el-select>
                </el-form-item>
                <el-form-item label="是否有结算">
                  <el-select
                    v-model="mxForm.isNull"
                    placeholder="请选择"
                    style="width: 286px"
                  >
                    <el-option label="是" value="是" />
                    <el-option label="否" value="否" />
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col :span="6">
            <div>当前页共{{ mxTableData.length }}项</div>
          </el-col>
          <el-col :span="10">
            <div>
              <el-button type="primary">新增</el-button>
              <el-button type="primary">删除</el-button>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div>
              <elltable
                ref="multipleTable"
                :loading="mxloading"
                :data="mxTableData"
                :th="mxth"
                :n="4"
              />
            </div>
          </el-col>
        </el-row>
        <div class="block" style="display: flex; justify-content: flex-end">
          <pagination
            :current-page="mxForm.pageDate.pageNum"
            :page-size="mxForm.pageDate.pageSize"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getOutletsList, getHqSettleSubjectList, rewardApportionSearch, collectSearch } from '@/api/dashboard'

export default {
  data() {
    return {
      jftype: [
        { value: 0, label: '操作类_奖惩' },
        { value: 1, label: '客服类_奖惩' },
        { value: 2, label: '时效类_奖惩' },
        { value: 3, label: '网管类_奖惩' }

      ],
      jstype: [
        { value: 0, label: '客户' },
        { value: 1, label: '承包区' },
        { value: 2, label: '业务员' }
      ],
      hzloading: false,
      mxloading: false,
      activeName: 'first',
      hzth: [],
      mxth: [],
      form: {
        networkNameId: '',
        collectDimensionality: '1',
        timeType: 1,
        startTime: '',
        endTime: '',
        month: '',
        settleType: '',
        settleObject: '',
        nwReceiptPayType: '',
        pageDate: {
          pageNum: 1,
          pageSize: 10
        }
      },
      // 明细
      mxForm: {
        // 运单号
        transportCodes: [],
        // 网点
        networkNameId: '',
        // 时间范围 1：出账时间 2：收款时间
        timeType: 1,
        // 奖罚类型
        rewardType: '',
        // 总部科目结算id
        hqSettleSubjectId: '',
        // 结算类型
        settleType: '',
        // 结算对象
        settleObject: '',
        // 收付类型
        hqReceiptPayType: '',
        // 是否有效
        effectiveStatus: '',
        // 是否核实
        isVerify: '',
        // 是否有结算
        isNull: '',

        // 开始时间
        startTime: '',
        // 结束时间
        endTime: '',
        pageDate: {
          pageNum: 1,
          pageSize: 10
        }

      },
      // 日期
      Time: [],
      mxTime: [],
      // 网点列表
      networkList: [],

      total: 0,
      hztotal: 0,
      hzpages: {
        pageNum: 1,
        pageSize: 10
      },
      currentPage: 1,

      currentPage4: 1,
      tableData: [],
      mxTableData: [],
      // 明细-总部结算科目
      HqSettleSubjectList: [],
      options: [],
      show: 1,
      props: {
        value: 'hqSettleSubject',
        label: 'hqSettleSubject',
        children: 'hqSettleSubjectList'
      }

    }
  },
  computed: {
    transportCodesString: {
      get() {
        return this.mxForm.transportCodes.join(',')
      },
      set(value) {
        this.mxForm.transportCodes = value !== '' ? value.split(',').map(item => item.trim()) : []
      }
    }
  },
  watch: {
    value(newValue) {
      // 监听 value 的变化，你可以根据需要进行相应的操作
      console.log('New Value:', newValue)
    }
  },
  created() {
    // this.getTabList()
    this.getOutLet()
    // this.hzsearch()
  },
  mounted() {
    this.getMxZBJS()
  },
  methods: {
    // 获取网点列表
    getOutLet() {
      getOutletsList().then((res) => {
        if (res.code === 200) {
          this.networkList = res.data
        }
      })
    },
    // 显示明细总部结算科目
    getMxZBJS() {
      getHqSettleSubjectList().then((res) => {
        if (res.code === 200) {
          this.HqSettleSubjectList = res.data
        } else {
          this.$message({
            message: res.msg,
            type: 'warning'
          })
        }
      })
    },
    // 显示汇总表格数据
    hzsearch() {
      this.hzloading = true
      collectSearch(this.form).then((res) => {
        console.log('查询', res)
        if (res.code === 200) {
          this.tableData = res.data.list.data
          this.hztotal = res.data.list.total
          this.hzth = res.data.fields
        } else {
          this.hzth = []
          this.tableData = []
          this.hztotal = 0
        }
      })
      this.hzloading = false
    },

    // 根据月.日切换时间选择
    handleDimensionalityChange(newVal) {
      this.Time = []
      this.show = newVal
      this.form.startTime = ''
      this.form.endTime = ''
      this.form.month = ''
    },

    // 总部结算科目
    handleChange(value) {
      console.log(value)
      this.mxForm.hqSettleSubjectId = value[2]
    },
    // 日期转换
    dateChange(value) {
      if (value != null) {
        this.mxForm.startTime = value[0]
        this.mxForm.endTime = value[1]
      } else {
        this.mxForm.startTime = ''
        this.mxForm.endTime = ''
      }
    },
    // 汇总日期转换
    hzdateChange(value) {
      if (value != null) {
        this.form.startTime = value[0]
        this.form.endTime = value[1]
      } else {
        this.form.startTime = ''
        this.form.endTime = ''
      }
    },
    // 查询
    search() {
      if (this.mxForm.startTime === '') {
        this.$message('请选择时间')
        return
      }
      this.mxloading = true
      rewardApportionSearch(this.mxForm).then((res) => {
        if (res.code === 200) {
          this.mxTableData = res.data.list.data
          this.total = res.data.list.total
          this.mxth = res.data.fields
          // this.pages = res.data.pages
        } else {
          this.mxTableData = []
          this.total = 0
          this.mxth = []
        }
      })
      this.mxloading = false
    },
    // 重置
    clear(aaa) {
      this.mxForm = aaa
      this.mxForm.timeType = 1
    },
    hzClear(aaa) {
      this.form = aaa
      this.form.timeType = 1
      this.form.collectDimensionality = '1'
    },

    hzhandleSizeChange(val) {
      this.form.pageDate.pageSize = val
      this.form.pageDate.pageNum = 1
      this.hzsearch()
    },
    hzhandleCurrentChange(val) {
      this.form.pageDate.pageNum = val
      this.hzsearch()
    },

    handleSizeChange(val) {
      this.mxForm.pageDate.pageSize = val
      this.getTabList()
    },
    handleCurrentChange(val) {
      this.mxForm.pageDate.pageNum = val
      this.getTabList()
    },
    handleSelectionChange(val) {
      // this.multipleSelection = val;
    }
  }
}

</script>

<style lang="scss" scoped>
.box {
  padding: 20px;
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

.header {
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.cx {
  width: 80px;
  height: 42px;
  background: #2087d0;
  border-radius: 21px;
  color: #fff;
}
</style>
